<template>
	<div>
		<el-row type="flex"  class="operation" align="middle">
			<el-col :span="13">
				<span>- 数据{{allNumber}} -</span>
			</el-col>
         <el-col :span="11">
            <el-radio-group v-model="allNumber"  @change="handleClick">
               <el-radio-button label="总量">总量</el-radio-button>
               <el-radio-button label="变化量">变化量</el-radio-button>
            </el-radio-group>
         </el-col>
		</el-row>
      <div id="main-echart" style="height:280px">
      </div>
      <div class="tab-tit-tip">
         <span class="tip-icon"></span>数据{{allNumber}}
      </div>
		<el-table class="table" v-loading="loading" max-height="290" :data="tablesList" @selection-change="handleSelectionChange" @row-click="handleRowClick" border>
            <el-table-column label="序号" align="center" key="id" prop="id" width="85">
             <template slot-scope="scope">
                     <span>{{scope.$index+1}}</span>
               </template>
            </el-table-column>
            <el-table-column label="变更类型" align="center" key="logTypeName" prop="logTypeName" width="199"  :show-overflow-tooltip="true" >
            </el-table-column>
            <el-table-column label="变更数量" align="center" key="updateCount" prop="updateCount" width="199"  :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="数据总量" align="center" key="dataCount" prop="dataCount" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="变更描述" align="center" prop="comment" key="comment">
            </el-table-column>
            <el-table-column label="变更时间" align="center" key="createTime" width="199" >
               <template slot-scope="scope">
                  <div>
                     <span>{{parseTime(new Date(scope.row.createTime),'{y}-{m}-{d} {h}:{i}:{s}')}}</span>
                  </div>
               </template>
            </el-table-column>
            <el-table-column label="变更人" align="center" key="operator" prop="operator" width="199">
            </el-table-column>
      </el-table>
      <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getTablesList"
      />
	</div>
</template>
<script>
import * as echarts from 'echarts';
import {getUpDatalogList,getUpDatalogMapList} from '@/api/dataManagement/system/log'
import {getDateTime,setData} from "@/utils/zkComm";
export default {
   name: "mapDetails",
   data(){
      return {
         // 遮罩层
         loading: false,
         allNumber:'总量',
         total:0,
         tableId:0,
         // 查询参数
         queryParams: {
            pageNum: 1,
            pageSize: 30,
            userName: undefined,
            phonenumber: undefined,
            status: undefined,
            deptId: undefined
         },
         viewModelOptionsValue: "2",
         // 用户表格数据
         userList: [],
         morehandleValue:'',
         EchartsList:[],
         tablesList:[]
      }
   },
   created(){
      this.tableId = this.$route.params.tableId;
      this.getEchartsList();
   },
   mounted(){
      // this.allNumber?this.allHandle():''
      this.getTablesList();
   },
   methods: {
      getEchartsList(){
         var params = {
            startDate :getDateTime().startdate,
            endDate :getDateTime().enddate,
            tableId:this.tableId
         }
         getUpDatalogMapList(params).then(res=>{
            this.EchartsList = res.data
            if(this.allNumber == '总量'){
               this.allHandle();
            } else{
               this.variatioHandle()
            }
         })
      },
      getTablesList(){
         getUpDatalogList({changeType:'data',tableId:this.tableId}).then(res=>{
            this.tablesList = res.rows
            this.total = res.total;
         })
      },
      initechart(obj){
         var chartDom = document.getElementById('main-echart');
         var myChart = echarts.init(chartDom);
         myChart.clear();
         var option = {
            tooltip: {
               trigger: 'axis',
               axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
               }
            },
            legend:obj.legend?obj.legend:null,
            grid:obj.grid?obj.grid:null,
            xAxis: {
               type: 'category',
               data: obj.xAxis.data || ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
               type: 'value',
            },
            series: obj.series
         };
         window.onresize = myChart.resize
         myChart.setOption(option);
      },
      // setData(numList,strList,data){
      //    var num = [],str = []
      //    if(Array.isArray(data)){
      //       for(var i=0;i<data.length;i++){
      //          num.push(data[i][numList])
      //          str.push(this.parseTime(new Date(data[i][strList]),"{m}-{d}"))
      //       }
      //    }
      //    return {str,num}
      // },
      // 分页
      getList(){},
      // 总量切换
      handleClick(value){
         this.getEchartsList();
      },
      // 总量
      allHandle(){
         console.log(this.EchartsList)
         var setEchart = setData("dataCount","createTime",this.EchartsList,this)
         console.log(setEchart)
         var data = {
               grid: {
               left: '0%',
               right: '0',
               bottom: '1%',
               top:'2%',
               containLabel: true
            },
            xAxis:{
               data:setEchart.str
            },
            series:[{
               data: setEchart.num,
               type: 'line',
               lineStyle:{
                  color:"#1183F8"
               },
               itemStyle: {
                  normal: {
                     color: "#1183F8",
                     lineStyle: {
                        color: "#1183F8"
                     }
                  }
               },
            }]
         }
         this.initechart(data)
      },
      //变化量
      variatioHandle(){
         var setEchart = setData("updateCount","createTime",this.EchartsList,this)
         var data = {
            legend: {
               data: ['变更总量']
            },
            grid: {
               left: '0%',
               right: '0%',
               bottom: '1%',
               top:'10%',
               containLabel: true
            },
            xAxis:{
               data:setEchart.str
            },
            series:[
               {
                  name: '变更数量',
                  type: 'line',
                  itemStyle: {
                     color: '#1183F8'
                  },
                  data: setEchart.num
               },
               // {
               //    name: '变更总量',
               //    type: 'bar',
               //    stack: '广告',
               //    itemStyle: {
               //       color: '#67C23A'
               //    },
               //    data: setEchart2.num
               // },
            ]
         }
         this.initechart(data)
      },

      //   表格
      handleSelectionChange(){

      },
      handleRowClick(){
      },
      updataHandle(){
         this.allNumber='总量',
         this.getEchartsList();
      },
   },
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/system/common.scss';
/****
 reset element style
.

 */
 
 .el-col-12{
    text-align: right;
 }
.table{
   margin-top:10px;
}
 /****
 reset element style
.

 */
 .operation {
	 margin:20px 0;
    text-align: right;
	 .search-select-parent{
		 width:320px;
	 }
	 .search-select-child,.search-select-descen{
		  width:160px;
		  margin-left:10px;
	 }
	 .el-button--mini{
		 width:100%;
		 margin-right:10px;
	 }
 }

</style>